<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>基于SpringBoot灾区物资运输管理系统</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
        if(window != top) {
            top.location.href = location.href;
        }
    </script>
    <style>
        html,body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .main {
            height: 100%;
            background-color: #D2EDFE;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-m {
            width: 1013px;
            height: 475px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login-l {
            width: 566px;
            height: 100%;
        }
        .login-r {
            width: calc(1013px - 564px);
            height: 473px;
            border: 1px solid #88C6FF;
        }
        .login input[type=text],
        .login input[type=file],
        .login input[type=password],
        .login input[type=email], select {
            border: 1px solid #DCDEE0;
            vertical-align: middle;
            border-radius: 3px;
            height: 50px;
            padding: 0px 16px;
            font-size: 18px;
            color: #555555;
            outline:none;
            box-sizing: border-box;
        }
        .login input[type=text]:focus,
        .login input[type=file]:focus,
        .login input[type=password]:focus,
        .login input[type=email]:focus, select:focus {
            border: 1px solid #27A9E3;
        }
        .login input[type=submit],
        .login input[type=button]{
            display: inline-block;
            vertical-align: middle;
            padding: 12px 24px;
            margin: 0px;
            font-size: 18px;
            line-height: 24px;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            color: #ffffff;
            background-color: #189F92;
            border-radius: 3px;
            border: none;
            -webkit-appearance: none;
            outline:none;
            width:100%;
        }
        .login hr {
            /*background: #fff url() 0 0 no-repeat;*/
            background: #fff 0 0 no-repeat;
        }
        .captcha-img img {
            height: 34px;
            border: 1px solid #e6e6e6;
            height: 36px;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="login-m">
        <div class="login-l">
            <img src="images/login.png">
        </div>
        <div class="login-r login">
            <form method="post" class="layui-form">
                <div style="width: 90%; height: 50px; margin: 0 auto; font-size: 20px; font-weight: bold; text-align: center; margin-top: 10px; color: #05988B;">基于SpringBoot灾区物资运输管理系统</div>
                <div style="width: 90%; height: 50px; margin: 0 auto;">
                    <input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input">
                </div>
                <div style="width: 90%; height: 50px; margin: 0 auto;"></div>
                <div style="width: 90%; height: 50px; margin: 0 auto;">
                    <input name="password" lay-verify="required" placeholder="登录密码" type="password" class="layui-input">
                </div>
                <div style="width: 90%; height: 50px; margin: 0 auto;"></div>
                <div style="width: 90%; height: 50px; margin: 0 auto;">
                    <input name="confirmpassword" lay-verify="required" placeholder="确认密码" type="password" class="layui-input">
                </div>
                <div style="width: 90%; height: 50px; margin: 0 auto;"></div>
                <div style="width: 90%; height: 50px; margin: 0 auto;">
                    <button class="layui-btn layui-block" lay-submit lay-filter="login" style="width:100%; height: 50px; font-size:18px;">注册</button>
                </div>
                <div style="width: 90%; height: 20px; margin: 0 auto;"></div>
                <div style="width: 90%; height: 50px; margin: 0 auto;">
                    <p style="text-align: center; margin-top: 10px; "><span style="color: #A3A6AB; margin-right: 10px;">返回</span><a href="index" style="color: #066EE9;">登录页面</a></p>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer;
        form.on("submit(login)", function (data) {
            if(data.field.password != data.field.confirmpassword) {
                layer.msg("两次密码不一致", {time: 2000});
                return false;
            }
            var btn = $(this);
            btn.text("注册中...").attr("disabled", "disabled").addClass("layui-disabled");
            $.ajax({
                url: "register",
                type: "post",
                data: {"accountName": data.field.username, "accountPassword": data.field.password, "confirmpassword": data.field.confirmpassword},
                dataType: "json",
                success: function (res,status,request) {
                    btn.text("注册").attr("disabled", false).removeClass("layui-disabled");
                    if(res.code == 200) {
                        layer.msg(res.msg, {time:1000}, function () {
                            window.location.href = "index";
                        });
                    } else {
                        layer.msg(res.msg, {time:1000});
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    btn.text("注册").attr("disabled", false).removeClass("layui-disabled");
                    layer.msg("服务器异常...");
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
